<template>
  <div class="fonds">
    <div
      class="fond flex sp-st align-center point"
      v-for="item in state.fonds"
      v-show="item.hidden"
      :key="item.id"
      @click="choice(item.id)"
    >
      <img :src="item.url" alt="" />
      <span class="text-14">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
export default {
  name: "Fonds",
  emits: ["onChoice"],
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      fonds: [
        {
          url: require("@/assets/images/phone.png"),
          name: t("user.phoneVerification"),
          id: 1,
          hidden: false,
        },
        {
          url: require("@/assets/images/email.png"),
          name: t("user.emailVerification"),
          id: 2,
          hidden: false,
        },
        {
          url: require("@/assets/images/guge.png"),
          name: t("user.GoogleVerification"),
          id: 3,
          hidden: false,
        },
      ],
    });
    const $store = useStore();
    onMounted(() => {
      const userserify = $store.state.user.securityInfo;
      state.fonds[0].hidden = userserify.user_phone ? true : false;
      state.fonds[1].hidden = userserify.user_email ? true : false;
      state.fonds[2].hidden =
        userserify.user_google_auth && userserify.user_google_status
          ? true
          : false;
      const list = state.fonds.filter((ele) => ele.hidden === true);
      if (list.length === 1) {
        choice(list[0].id);
      }
    });
    const choice = (i) => {
      emit("onChoice", i);
    };
    return {
      state,
      choice,
    };
  },
};
</script>

<style scoped lang="less">
.fonds {
  width: 100%;
  padding: 0 10px;
}
.fond {
  height: 56px;
  img {
    width: 24px;
    height: 24px;
    margin-inline-end: 14px;
  }
}
</style>
